﻿ <BSCarousel NumberOfItems="@items.Count" Fade="true">
        <BSCarouselIndicators NumberOfItems="@items.Count" ActiveIndexChangedEvent="@indexChanged" />
        <div class="carousel-inner">
            @for (int i = 0; i < items.Count; i++)
            {
                Item item = items[i];
                <BSCarouselItem src="@item.Source" alt="@item.Alt">
                    <BSCarouselCaption CaptionText="@item.Caption" HeaderText="@item.Header" />
                </BSCarouselItem>
            }
        </div>
        <BSCarouselControl CarouselDirection="CarouselDirection.Previous" NumberOfItems="@items.Count" />
        <BSCarouselControl CarouselDirection="CarouselDirection.Next" NumberOfItems="@items.Count" />
    </BSCarousel>
    
@code {
    int i = 0;
    IList<Item> items = new List<Item>
    {
        new Item {
            Source = "...First Slide",
            Alt ="First Slide",
            Caption = "Slide 1",
            Header = "Slide 1 Header"
        },
        new Item {
            Source = "...Second Slide",
            Alt ="Second Slide",
            Caption = "Slide 2",
            Header = "Slide 2 Header"
        },
        new Item {
            Source = "...Third Slide",
            Alt ="Third Slide",
            Caption = "Slide 3",
            Header = "Slide 3 Header"
        }
    };

    class Item
    {
        public string Source { get; set; }
        public string Alt { get; set; }
        public string Caption { get; set; }
        public string Header { get; set; }
    }
}